<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>职工仪表板</title>
    <!-- Font Awesome -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div layout:fragment="content">
        <div class="row mb-4">
            <div class="col">
                <h2>欢迎回来，<span th:text="${user.realName}">用户</span></h2>
            </div>
        </div>

        <!-- 账户信息 -->
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="stats-card card bg-primary text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">账户余额</h6>
                                <h2 class="stats-number mb-0" th:text="${#numbers.formatDecimal(user.balance ?: 0, 1, 2)}">0.00</h2>
                            </div>
                            <div class="stats-icon">
                                <i class="fas fa-wallet"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card card bg-success text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">购物车商品</h6>
                                <h2 class="stats-number mb-0" th:text="${cartCount ?: 0}">0</h2>
                            </div>
                            <div class="stats-icon">
                                <i class="fas fa-shopping-cart"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stats-card card bg-info text-white">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="card-title mb-0">待收货订单</h6>
                                <h2 class="stats-number mb-0" th:text="${pendingOrders ?: 0}">0</h2>
                            </div>
                            <div class="stats-icon">
                                <i class="fas fa-truck"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品推荐 -->
        <div class="row mb-4">
            <div class="col">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">商品推荐</h5>
                        <a th:href="@{/employee/products}" class="btn btn-sm btn-outline-primary">查看全部</a>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-4" th:each="product : ${recommendProducts}">
                                <div class="card product-card h-100">
                                    <img th:src="${product.image ?: '/static/images/default-product.jpg'}" 
                                         class="card-img-top" alt="商品图片">
                                    <div class="card-body">
                                        <h5 class="card-title" th:text="${product.name}">商品名称</h5>
                                        <p class="card-text text-muted" th:text="${product.description}">商品描述</p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-danger fw-bold" th:text="${'¥' + #numbers.formatDecimal(product.price, 1, 2)}">
                                                ¥0.00
                                            </span>
                                            <button class="btn btn-sm btn-primary" 
                                                    th:onclick="'cart.addToCart(' + ${product.id} + ', 1)'">
                                                <i class="fas fa-cart-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最新订单 -->
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">最新订单</h5>
                        <a th:href="@{/employee/orders}" class="btn btn-sm btn-outline-primary">查看全部</a>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>订单号</th>
                                        <th>商品</th>
                                        <th>数量</th>
                                        <th>金额</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${#lists.isEmpty(recentOrders)}">
                                        <td colspan="6" class="text-center">暂无订单</td>
                                    </tr>
                                    <tr th:each="order : ${recentOrders}">
                                        <td th:text="${order.orderNo}">订单号</td>
                                        <td th:text="${order.productName}">商品</td>
                                        <td th:text="${order.quantity}">0</td>
                                        <td th:text="${#numbers.formatDecimal(order.totalAmount, 1, 2)}">0.00</td>
                                        <td>
                                            <span th:class="'badge ' + ${order.status == 0 ? 'bg-warning' : (order.status == 1 ? 'bg-info' : 'bg-success')}"
                                                  th:text="${order.status == 0 ? '待发货' : (order.status == 1 ? '已发货' : '已完成')}">
                                                状态
                                            </span>
                                        </td>
                                        <td>
                                            <button th:if="${order.status == 0}" class="btn btn-sm btn-danger" 
                                                    th:onclick="'order.cancelOrder(' + ${order.id} + ')'">
                                                取消
                                            </button>
                                            <button th:if="${order.status == 1}" class="btn btn-sm btn-success" 
                                                    th:onclick="'order.confirmReceipt(' + ${order.id} + ')'">
                                                确认收货
                                            </button>
                                            <a th:href="@{/employee/orders/{id}(id=${order.id})}" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 